<template>
  <div class="w-full h-full flex flex-col md:flex-row md:items-center md:justify-around" ref="playComRef">
    <div class="flex-1 flex md:h-full md:justify-around flex-col">
      <div v-if="banZouUrl" class="w-full flex items-center justify-center align-center">
        <SegmentedSelect
          v-model="audioType"
          @change="changeAudioType"
          :items="[
            { label: '原唱', value: PLAY_AUDIO_TYPE_ENUM.AUDIO },
            { label: '伴奏', value: PLAY_AUDIO_TYPE_ENUM.BAN_ZOU },
          ]"
          :padding="4"
          :rounded="8"
        />
      </div>
      <div
        v-if="logoIsShow"
        :class="{ hidden: !logoIsShow }"
        class="w-full flex justify-center flex-1 relative"
        ref="yuanPanWrapRef"
      >
        <yuan-pan ref="yuanpan" :size="yuanPanSize"></yuan-pan>
      </div>

      <div v-if="banZouLyricIsShow" class="flex-1 md:hidden relative">
        <div class="absolute inset-0">
          <LyricVue></LyricVue>
        </div>
      </div>

      <div class="hidden md:flex w-full">
        <play-con @init="handlerPlayConInit"></play-con>
      </div>
    </div>

    <div class="md:flex-1 flex flex-col">
      <div class="hidden md:block">
        <LyricVue :height="lyricHeight"></LyricVue>
      </div>
      <div class="md:hidden pb-[8px]">
        <play-con @init="handlerPlayConInit"></play-con>
      </div>
    </div>
  </div>
  <img-dialog ref="imgDialogRef" :alt="info.mulu"></img-dialog>
</template>
<script lang="ts" setup>
import YuanPan from "../YuanPan/index.vue";
import PlayCon from "../PlayCon/index.vue";
import ImgDialog from "@/components/ImgDialog.vue";
import LyricVue from "../StraLyric.vue";
import AudioList from "@/utils/audio-list/main";
import { useStore } from "vuex";
import { computed, ref } from "vue";
import useAudioShortKey from "@/hooks/useAudioShortKey";
import { useTemplateRef } from "vue";
import { useWindowSize } from "@vueuse/core";
import { watch } from "vue";
import { useElementSize } from "@vueuse/core";
import SegmentedSelect from "@/components/SegmentedSelect/index.vue";
import { PLAY_AUDIO_TYPE_ENUM } from "@/utils/audio-list/main";

defineProps({
  id: {
    // 歌曲ID号
    type: String,
    required: true,
  },
  gedanid: {
    // 我的歌单的id
    type: [String, Number],
    default: 0,
  },
  type: {
    // 歌单的类型 可选值是 shiji 和 gedan
    type: String,
    default: "shiji",
  },
});

const { width, height } = useWindowSize();
const playComRef = useTemplateRef("playComRef");
const yuanPanWrapRef = useTemplateRef("yuanPanWrapRef");
const { height: playComHeight } = useElementSize(playComRef);
const { height: yuanPanWrapHeight, width: yuanPanWrapWidth } = useElementSize(yuanPanWrapRef);
useAudioShortKey();
const store = useStore();
const audioType = ref<PLAY_AUDIO_TYPE_ENUM>(PLAY_AUDIO_TYPE_ENUM.AUDIO);
const lyricHeight = ref("90px");

const info = computed(() => {
  return store.state.audio.info;
});
const mdWidth = 480;

const logoIsShow = computed(() => {
  if (audioType.value === PLAY_AUDIO_TYPE_ENUM.BAN_ZOU && width.value < 770) return false;
  return height.value > mdWidth;
});
const banZouLyricIsShow = computed(() => {
  return audioType.value === PLAY_AUDIO_TYPE_ENUM.BAN_ZOU && width.value < 770;
});
const yuanPanSize = computed(() => {
  if (yuanPanWrapWidth.value > yuanPanWrapHeight.value) {
    const width = Math.min(yuanPanWrapHeight.value, 580);
    return width - 100;
  } else {
    return Math.min(yuanPanWrapWidth.value * 0.8, 320);
  }
});
const title = computed(() => {
  if (info.value.mulu && info.value.xuhao) {
    return `${info.value.xuhao}.${info.value.mulu}`;
  }
  return "加载中...";
});

const banZouUrl = computed(() => {
  return info.value?.dmtUrl?.banZouUrl ?? "";
});

function changeAudioType(index: number, e: PLAY_AUDIO_TYPE_ENUM) {
  AudioList.audioList.changeAudioType(e);
}

function handlerPlayConInit() {
  if (width.value > 770) {
    lyricHeight.value = `${playComHeight.value}px`;
    return;
  }
  lyricHeight.value = `0px`;
}

watch([width, height], () => {
  handlerPlayConInit();
});

watch(title, () => {
  audioType.value = PLAY_AUDIO_TYPE_ENUM.AUDIO;
});
</script>
